<style>
    .layui-btn .layui-icon{
        margin-right: 0;
    }
    .layui-form-pane .layui-form-label, .layui-form-pane .layui-input-inline{
        width: auto;
    }
    .view-data{
        height: 36px;
        line-height: 36px;
        display: inline-block;
        padding: 0 20px;
        border-style:solid;
        border-width:1px;
        background-color:#fff;
        border-radius:2px;
        border-color:#e6e6e6;
    }
    .table-body .layui-btn .iconfont{
        font-size: 17px !important;
    }
    .layui-card-body{
        background-color: #fff;
        padding: 10px;
        margin-top: 10px;
        border: 1px solid #e6e6e6;
    }
    .layui-tab-card>.layui-tab-title{
        background-color: #f9f9f9;
        border-bottom: none;
    }
    .layui-tab-content{
        padding: 0;
    }
    .layui-table, .layui-table-view{
        margin: 0;
    }
    .layui-form-item{
        margin-bottom: 0px;
    }
</style>

<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">房间号：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="room_bn" placeholder="请输入房间号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--div class="layui-inline">
            <label class="layui-form-label">套餐名称：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="taocan_name" placeholder="请输入套餐名称" autocomplete="off" class="layui-input">
            </div>
        </div--->
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="seach"><i class="iconfont icon-chaxun"></i>筛选</button>
            </div>
        </div>
    </div>
</form>

<div class="table-body">
    <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title" id="tab">
        <li class="layui-this" data-pay_status="2">待出单</li>
        <li data-pay_status="">全部订单</li>
        <li data-pay_status="1">已支付</li>
       <!-- <li data-pay_status="0">待支付</li>-->
    </ul>
    </div>
    <table id="taocan_order" lay-filter="taocan_order"></table>
</div>
<script type="text/html" id="btn">
    <a class="layui-btn layui-btn-xs edit-class" lay-event="look" >查看</a>
    <a class="layui-btn layui-btn-xs edit-class layui-bg-blue" lay-event="dy" >打印</a>
    {{# if(d.status == '0'){ }}
    <a class="layui-btn layui-btn-xs edit-class" lay-event="cd" >出单</a>
    {{# } }}
    {{# if(d.pay_status != '2'){ }}
    <!--<a class="layui-btn layui-btn-xs edit-class layui-bg-red" lay-event="cancel" >取消</a>-->
    {{# } }}
    <a class="layui-btn layui-btn-xs edit-class layui-bg-red" lay-event="cancel" >取消</a>
</script>
<script type="text/html" id="form">
<div class="layui-form" style="padding:20px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">下单用户：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.nickname}}</div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户手机：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.mobile}}</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">房间编号：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.room_bn}}</div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">房间名称：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.room_name}}</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">套餐：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.taocan_name}}</div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">套餐金额：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.taocan.price}}</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">付款金额：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.price}}</div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">付款时间：</label>
            <div class="layui-input-inline seller-inline-2">
                <div class="layui-form-mid">{{d.date}}</div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">明细：</label>
        <div class="layui-input-block">
         
                <table class="layui-table">
  <thead>
    <tr>
      <th>套餐商品</th>
      <th>数量</th>
    </tr> 
  </thead>
  <tbody>
    {{#  layui.each(d.taocan.goods, function(index, item){ }}
    <tr>
      <td>{{item.name}}</td>
      <td>{{item.total}}</td>
    </tr>
    {{#  }); }}
  </tbody>
</table>
           
        </div>
    </div>
</div>
</script>
<script>
    var window_box, table;
    layui.use(['table', 'layer', 'laydate', 'form', 'element', 'laytpl'], function () {
        var layer = layui.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                form = layui.form,
                element = layui.element,
                table = layui.table,
                filter = {},
                laytpl = layui.laytpl,
                pay_status = '';

        let lock = false;
        table.render({
            elem: '#taocan_order', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-260',
            cellMinWidth: '80',
            page:true,
            where:{'pay_status' : 1, 'status' : 0},
            limit:15,
            id:'taocan_order',
            url: "{:url('taocan_order/index')}",
            cols: [[ //表头
                {field: 'id',title:'',align:'center',width:80},
                {field: 'room_bn', title: '房间编号',align:'center',width:100},
                {field: 'price', title: '价格',align:'center',width:100},
                {field: 'nickname',title:'下单用户',align:'center',width:100},
                {field: 'date', title: '下单时间',align:'center',width:180},
                //{field: 'mobile',title:'手机号码',align:'center',width:130},
                //{field: 'taocan_name', title: '套餐名称',align:'center',width:150},
                /*{field: 'pay_status', title: '支付状态',align:'center',width:100,templet: function(data) {
                    if(data.pay_status == 0){
                        return '未支付';
                    }else if(data.pay_status == 1){
                        return '已支付';
                    }else{
                        return '已取消';
                    }
                }},*/
                {field: 'status', title: '出单状态',align:'center',width:100,templet: function(data) {
                    if(data.status == 0){
                        return '待出单';
                    }else{
                        return '已出单';
                    }
                }},
                /*{field: 'payment_code', title: '支付方式',align:'center',width:100,templet: function(data) {
                    if(data.payment_code == 'wechatpay'){
                        return '微信支付';
                    } else if('balance'){
                        return '余额支付';
                    }else{
                        return '支付宝';
                    }
                }},*/
                {fixed: 'right', width:200,title:'操作', align:'center', toolbar: '#btn'}
            ]]
        });
        $('#tab li').click(function() {
            pay_status = $(this).data('pay_status');
            if(pay_status == '2') {
                filter.pay_status = 1;
                filter.status = 0;
            } else {
                filter.pay_status = 1
                filter.status = ''
            }
            table.reload('taocan_order', {
                where: filter 
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
        form.on('submit(seach)', function(data){
            filter.room_bn = data.field.room_bn;
            filter.mobile = data.field.mobile;
            filter.taocan_name = data.field.taocan_name;
            table.reload('taocan_order', {
                where: filter
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        table.on('tool(taocan_order)', function(obj){
            var data = obj.data;
            data.taocan = JSON.parse(data.taocan)
            if(obj.event == 'look') {
                open(data)
            } else if(obj.event == 'cd') {
                layer.confirm('您确定要出单?', function(){
                    $.ajax({
                        type: 'POST',
                        url:"{:url('taocan_order/editStatus')}",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (respon) {
                            table.reload('taocan_order', {
                                where: filter
                                ,page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                            layer.msg('出单成功')
                        },
                        error: function (err) {
                            layer.msg('出单失败')
                        }
                    })
                 });
            } else if(obj.event=='cancel') {
                $.ajax({
                    type: 'GET',
                    url: "{:url('Api/getToken')}",
                    dataType: 'json',
                    success: function (respon) {
                        cancel(data, respon.token);
                    },
                    error: function(error) {
                        if(error.responseJSON) {
                            layer.msg(error.responseJSON.msg);
                        } else {
                            layer.msg(error.statusText);
                        }
                    }
                })
                /*layer.confirm('您确定要取消改套餐?', function(){
                    if(!lock) {
                        lock = true;
                        $.ajax({
                            type: 'POST',
                            url: "{:url('taocan_order/editPayStatus')}",
                            data: {id: data.id},
                            dataType: 'json',
                            success: function (respon) {
                                table.reload('taocan_order', {
                                    where: filter
                                    , page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                layer.msg('取消成功');
                                setTimeout(function () {
                                    lock = false;
                                }, 1000);
                            },
                            error: function (err) {
                                layer.msg('取消失败');
                                setTimeout(function () {
                                    lock = false;
                                }, 1000);
                            }
                        });
                    }else{
                        layer.msg("操作过于频繁");
                    }
                 });*/
            } else if(obj.event=='dy'){
                $.ajax({
                    url:"{:url('TaocanOrder/getDetail')}",
                    type:'post',
                    data: {'id':data.id},
                    success:function(res){
                        if(res.status == true){
                            let date = new Date();
                            let year = date.getFullYear();
                            let month = date.getMonth() + 1;
                            let day = date.getDate();
                            let hour = date.getHours();
                            let minute = date.getMinutes();

                            let taocan = res.data;
                            if(taocan.taocan && taocan.taocan != ""){
                                taocan.taocan = JSON.parse(taocan.taocan);
                            }
                            console.log(taocan);
                            LODOP = getLodop(document.getElementById('LODOP1'), document.getElementById('LODOP_EM1'));
                            LODOP.PRINT_INITA(0, 0, 230, 230, "打印条码");
                            LODOP.SET_PRINTER_INDEX(-1);
                            LODOP.SET_PRINT_PAGESIZE(1,580,-1,"");
                            LODOP.SET_PRINT_STYLE("FontSize", 12);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT("30","30","230","20","房间套餐销售单");
                            LODOP.SET_PRINT_STYLE("FontSize", 12);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(70, 10, 230, 20, "房间编号：" + taocan.room_bn);
                            LODOP.SET_PRINT_STYLE("FontSize", 10);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            /*if(taocan.taocan && typeof (taocan.taocan) == 'object'){
                                LODOP.ADD_PRINT_TEXT(90, 10, 230, 20, "套餐：" + taocan.taocan['name']);
                            }else{
                                LODOP.ADD_PRINT_TEXT(90, 10, 230, 20, "套餐：-");
                            }*/
                            LODOP.ADD_PRINT_TEXT(90, 10, 230, 20, "下单人：" + taocan.nickname);
                            LODOP.ADD_PRINT_TEXT(120, 10, 230, 20, "下单手机：" + taocan.mobile);
                            let x = 150
                            LODOP.SET_PRINT_STYLE("FontSize", 11);
                            LODOP.SET_PRINT_STYLE("Bold", 0);
                            if(taocan.taocan && typeof (taocan.taocan) == 'object'){
                                let goods = taocan.taocan['goods']
                                for(let i = 0; i < goods.length; i++){
                                    let nk = "";
                                    if(strlen(goods[i].name) <= 24){
                                        let y = 24 - strlen(goods[i].name);
                                        for(let a = 0; a < y; a++){
                                            nk += " ";
                                        }
                                    }else{
                                        goods[i].name = goods[i].name.substring(0,21) + "..";
                                        nk += "  ";
                                    }
                                    LODOP.ADD_PRINT_TEXT(x, 10, 230, 20,  goods[i].name + nk + "x" + goods[i].total);
                                    x += 20
                                }
                            }else{
                                LODOP.SET_PRINT_STYLE("FontSize", 12);
                                LODOP.SET_PRINT_STYLE("Bold", 1);
                                LODOP.ADD_PRINT_TEXT(x,"10","230","20","房间套餐无其他内容");
                                x += 20
                            }


                            LODOP.SET_PRINT_STYLE("FontSize", 11);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            LODOP.ADD_PRINT_TEXT(x + 10, 10, 230, 20, "总金额：￥" + toDecimal2NoZero(Number(taocan.price )));

                            LODOP.SET_PRINT_STYLE("FontSize", 8);
                            LODOP.SET_PRINT_STYLE("Bold", 0);
                            LODOP.ADD_PRINT_TEXT(x + 30, 10, 230, 20, "打印时间：" + year + "/" + month + "/"+ day + " " + hour + ":"+ minute);
                            LODOP.SET_PRINT_STYLE("FontSize", 10);
                            LODOP.SET_PRINT_STYLE("Bold", 1);
                            if(taocan.payment_code == "wechatpay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：微信支付");
                            }else if(taocan.payment_code == "alipay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：支付宝支付");
                            }else if(taocan.payment_code == "balance"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：会员卡余额支付");
                            }else if(taocan.payment_code == "offline"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：桌面二维码支付");
                            }else if(taocan.payment_code == "after_pay"){
                                LODOP.ADD_PRINT_TEXT(x + 60, 10, 230, 20, "支付方式：最后离店结算");
                            }
                            LODOP.SET_PRINT_STYLE("FontSize", 8);
                            LODOP.SET_PRINT_STYLE("Bold", 0);
                            LODOP.ADD_PRINT_TEXT(x + 90, 10, 230, 20, "-----------------------------------------");
                            LODOP.PREVIEW();

                        }else{
                            layer.msg(res.msg);
                        }
                    }
                },'json')
            }
        });
        var open = function (data) {
            var form = $('#form').html();
            laytpl(form).render(data, function(html){
                lay_index = layer.open({
                    type: 1,
                    title: '订单详情',
                    shadeClose: true,
                    shade: false,
                    area: ['650px', '520px'], //宽高
                    content: html
                  });
            });
        }
        var cancel = function (data, token) {
            layer.confirm('您确定要取消改套餐?', function(){
                $.ajax({
                    type: 'POST',
                    url: "{:url('taocan_order/editPayStatus')}",
                    data: {id: data.id, token: token},
                    dataType: 'json',
                    success: function (respon) {
                        table.reload('taocan_order', {
                            where: filter
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg('取消成功');
                    },
                    error: function (err) {
                        if(error.responseJSON) {
                            layer.msg(error.responseJSON.msg);
                        } else {
                            layer.msg('取消失败');
                            //layer.msg(error.statusText);
                        }
                    }
                });
            });
        }
    });
    function toDecimal2NoZero(x) {
        let f = Math.round(x * 100) / 100;
        let s = f.toString();
        return s;
    }

    function strlen(str){
        let len = 0;
        for (let i=0; i<str.length; i++) {
            let c = str.charCodeAt(i);
            //单字节加1
            if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
                len++;
            }
            else {
                len+=2;
            }
        }
        return len;
    }
</script>